<template>
	<view class="aside">
		<image src="../../static/back.jpg" class="backimage"></image>
		<view class="title">
			<text class="title-text-one">乐分享</text>
			<br>
			<text class="title-text-two">-----分享你中意的店铺吧！</text>
		</view>
		<view class="userandpaw">
			<view class="uni-form-item ">
				<view class="usermess">账号:</view>
				<input class="uni-input" type="number" focus placeholder="请输入账号" v-model="username"/>
			</view>
			<view class="uni-form-item">
				<view class="usermess">密码:</view>
				<input class="uni-input" type="number" placeholder="请输入密码"  v-model="userpass"/>
			</view>

			<view class="action-btn">
				<button @click="handleLogin()" class="login-btn " hover-class="change" hover-start-time="50"
					plain="ture">登录</button>
			</view>
			<view class="reg">
				<text class="text-grey1">没有账号？</text>
				<text @click="handleUserRegister()" class="text-blue">立即注册</text>
			</view>

		</view>
		<view class="end">
			<text class="mess">联系我们"xxxxxxxxxxx"</text>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	const username = ref ()
	const userpass = ref ()

	function handleLogin() {
		// 登录逻辑
		if (username.value==123456&&userpass.value==123456) {
			console.log(username)
			console.log(userpass)
			uni.switchTab({
		      url: '../index/index'
		    });
		} else{
			uni.showToast({
			    title: '账号或密码错误，请重试',
			    icon: 'none',
			    duration: 1500,
			});

			// 等待 2 秒后跳转
			setTimeout(() => {
			    uni.redirectTo({
			        url: '/pages/Login/Login'
			    });
			}, 1000);

		}
		    
	}
	function handleUserRegister(){
		uni.redirectTo({
		    url: '/pages/Login/Register/Register'
		});
	}
</script>


<style scoped lang="scss">
.aside{
	   width: 100%;
	   height: 100%;
	  .title{
		   width: 100%;
		   height: 30%;
		   text-align: center;
		   display: flex;
		    justify-content: center;
			align-items: center;
			flex-direction: column;
		   .title-text-one{
			   font-size: 40px;
			   font-weight: bold;
		   }
		   .title-text-two{
			   margin-left: 150px;
		   }
	   }
	   .userandpaw{
		   width: 100%;
		   height: 60%;
		   text-align: center;
		   .uni-form-item{
			 margin: 20px;
			 display: flex;
			 line-height: 50px ;
		  
		   .uni-input{
			   margin-left: 20px;
		   	   width: 80%;
		   	   background-color: #f5f6f7;
		   	   height: 45px;
		   	   border-radius: 20px;   			   
		   }
		    .usermess{
				width: 50px;
				font-size: 20px;
				text-align: center;
				vertical-align: middle;
			}
		   
       }
		   .action-btn{
			   height: 20%;
			   .login-btn{
				   border-radius: 50px;
				   width: 70%;
				   margin-top:50px ;
			   }
		   }
	   }
	   .end{
		   width: 100%;
		   height: 5%;
		   display: flex;
		   .mess{
			   width: 100%;
			   text-align: center;
			   position: absolute;
			   bottom: 10px;
			   color: white;
		   }
		   
	   }
	   .text-blue{
		   color: blue;
	   }
	   .backimage{
		     position: fixed;
		       width: 100%;
		       height: 100%;
		       top: 0;
		       left: 0;
		       z-index: -1;
	   }
   }  
   
   .change{
   	background-color: beige!important;
   }
   
    uni-page-body,html,body{  
           height: 100%;  
       }  
</style>

